<template>
  <div class="main-content">
    <div class="toptitleblock">
      <span class="Maintitle">花型详情</span>
      <!-- <el-button class="titlebutton1" size="medium" type="primary" v-if="isCart == 0">编辑花型</el-button> -->
      <!-- <el-button class="titlebutton2" size="medium" type="primary" @click="publicA" v-if="isCart == 0">公布花型</el-button> -->
    </div>

    <div class="PatternData">
      <el-row v-cloak>
        <el-col :span="4">
          <div style="width: 240px; height: 148px; margin: 40px 0px 40px 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; ">
            <el-image
              :src="baseurl + '/' + form.picture"
              style="height: 100%"
              :preview-src-list="[baseurl + '/' + form.picture]"
            />
          </div>
        </el-col>
        <el-col :span="10">
          <el-button
            class="state"
            size="small"
            disabled
            v-if="form.is_valid == 1"
            type="success"
            >已生效</el-button
          >
          <el-button class="state" size="small" disabled v-else
            >已失效</el-button
          >
          <div class="Secondarytitle">
            <span>{{ form.no }} </span>
            <span v-if="session.account_type != 2">{{ form.series ?   '(' +form.series+') ': '' }}</span>
          </div>
          <div class="tInfo">
            <span>花型等级：A</span>
            <span>单位：{{ form.unit }}</span>
            
            <span>厂家：{{ form.factory }}</span>
            <!-- <span v-if="session.account_type != 2"
              >物料库存：{{ form.stock }}</span
            > -->
            <span>相似值：{{ form.similarity_value }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="display: flex; margin: 20px 0px 0px 47px" v-cloak>
      <el-descriptions title="具体信息" style="flex: 2">
        <el-descriptions-item label="花型克重">
          {{ form.weight }}g
        </el-descriptions-item>
        <el-descriptions-item label="花型成分">
          {{ form.component }}
        </el-descriptions-item>
        <el-descriptions-item label="花型用途">
          {{ form.purpose }}
        </el-descriptions-item>
        <el-descriptions-item label="花型款式">
          {{ form.design }}
        </el-descriptions-item>
        <el-descriptions-item label="花型幅宽(高对高)">
          {{ form.widthheight }}cm
        </el-descriptions-item>
        <el-descriptions-item
          label="花型幅宽(低对低)"
          v-if="session.account_type != 2"
          >{{ form.widthlow }}cm
        </el-descriptions-item>
        <el-descriptions-item label="花型花高">
          {{ form.height }}cm
        </el-descriptions-item>
        <el-descriptions-item label="花型材料">
          {{ form.material_science }}</el-descriptions-item
        >
        <el-descriptions-item label="花型弹性">
          {{ form.elastic }}</el-descriptions-item
        >
        <el-descriptions-item label="花型波边">
          {{ form.wave_edge }}</el-descriptions-item
        >
        <el-descriptions-item label="花型机型" v-if="session.account_type != 2"
          >{{ form.model }}
        </el-descriptions-item>
        <el-descriptions-item label="花型针数">
          {{ form.radio_station }}
        </el-descriptions-item>
        <el-descriptions-item label="功能">
          {{ form.function }}
        </el-descriptions-item>
        <el-descriptions-item label="花型风格">
          {{ form.style }}
        </el-descriptions-item>
        <el-descriptions-item label="花型质感">
          {{ form.texture }}
        </el-descriptions-item>
        <el-descriptions-item label="花型描述">
          {{ form.element }}
        </el-descriptions-item>
        <el-descriptions-item label="花型结构">
          {{ form.structure }}
        </el-descriptions-item>
        <el-descriptions-item label="创建日期" v-if="session.account_type != 2"
          >{{ form.created | formatterTime }}
        </el-descriptions-item>
        <el-descriptions-item label="更新日期" v-if="session.account_type != 2"
          >{{ form.updated | formatterTime }}
        </el-descriptions-item>
        <el-descriptions-item label="公布日期" v-if="session.account_type != 2"
          >{{ form.publish_time | formatterTime }}
        </el-descriptions-item>
        <el-descriptions-item
          label="花型封板情况"
          v-if="session.account_type != 2"
        >
          <el-cascader
            v-model="form.sealing_status"
            :options="areas"
            :props="{ multiple: true, checkStrictly: true }"
            filterable
            clearable
            disabled
          ></el-cascader>
        </el-descriptions-item>
      </el-descriptions>
      <!-- <el-descriptions title="备用新增字段" :column="2" style="flex: 1">
        <el-descriptions-item label="备用1">kooriookami</el-descriptions-item>
        <el-descriptions-item label="备用2">18100000000</el-descriptions-item>
        <el-descriptions-item label="备用3">苏州市</el-descriptions-item>
        <el-descriptions-item label="备用4">苏州市 </el-descriptions-item>
      </el-descriptions> -->
    </div>
    <!-- 物料名称,颜色,客户色名,卡号,箱号,库位,等级,库存重量,库存长度,单位,最晚日期,仓库名称,库存类型,布类,机型,排单余数 -->
    <div style="display: flex; margin: 20px 0px 0px 47px;width: 90%;">
      <template >
      <el-table  :data="form.FlowersStock" border style="width: 100%">
        <el-table-column prop="wlmc"  label="物料名称"  > </el-table-column>
        <el-table-column prop="ys" label="颜色" > </el-table-column>
        <el-table-column prop="khsh" label="客户色名" >  </el-table-column>
        <el-table-column  prop="kahao"  label="卡号" > </el-table-column>
        <el-table-column prop="xianghao"  label="箱号" >  </el-table-column>
        <el-table-column prop="kuwei" label="库位" >  </el-table-column>
        <el-table-column prop="dengji" label="等级" >  </el-table-column>
        <el-table-column prop="kczl" label="库存重量" >  </el-table-column>
        <el-table-column prop="kccd" label="库存长度" >  </el-table-column>
        <el-table-column prop="dw" label="单位" >  </el-table-column>
        <el-table-column prop="zwrq" label="最晚日期" >  </el-table-column>
        <el-table-column prop="ckmc" label="仓库名称" >  </el-table-column>
        <el-table-column prop="kclx" label="库存类型" >  </el-table-column>
        <el-table-column prop="bl" label="布类" >  </el-table-column>
        <el-table-column prop="jx" label="机型" >  </el-table-column>
        <el-table-column prop="pdys" label="排单余数" >  </el-table-column>
        <el-table-column prop="lfts" label="两幅条数" >  </el-table-column>
      </el-table>
    </template>
    </div>


    <div
      style="text-align: right; position: absolute; bottom: 40px; right: 50px"
      v-if="isCart == 1"
    >
      <el-input-number
        v-model="num"
        :min="1"
        label="库存"
        size="small"
        style="margin-right: 40px"
      ></el-input-number>
      <el-button
        size="small"
        type="primary"
        style="margin-right: 10px"
        @click="addCart(form.pid, form.no, form.series, form.picture)"
        >加入购物车</el-button
      >
      <el-button size="small" @click="dialogVisible = true">立即下单</el-button>
    </div>

    <el-dialog
      class="dialogTitle"
      title="确认下单数量"
      :visible.sync="dialogVisible"
      width="627px"
    >
      <div style="width: 583px; background-color: #f3f3f3">
        <div class="Orderblock">
          <div
            style="
              width: 64px;
              height: 64px;
              position: absolute;
              left: 7px;
              top: 7px;
            "
          >
            <img
              :src="baseurl + '/' + form.picture"
              alt=""
              style="width: 100%; height: 100%"
            />
          </div>
          <div class="OrderblockTitle">
            {{ form.no + "(" + form.series + ")" }}
          </div>
          <el-input-number size="mini" v-model="num" :min="1"></el-input-number>
          <!-- <div class="Orderblockdelete" @click="Orderblockdelete()">删除</div> -->
        </div>
      </div>
      <div>
        <el-form ref="order" :inline="true" :model="order">
          <div class="dialogflex">
            <!-- <div class="dialogtypeface">要求交期</div> -->
            <el-form-item
              label="要求交期"
              prop="delivery_date"
              :rules="[{ required: true, message: '要求交期不能为空' }]"
            >
              <el-date-picker
                v-model="order.delivery_date"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div
            class="OrderSelectionCustomer dialogflex"
            v-if="session.role_id != 2"
          >
            <!-- <div class="dialogtypeface">选择客户</div> -->
            <!-- <el-select v-model="customervalue" filterable placeholder="请选择">
            <el-option
              v-for="item in customer"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select> -->
            <el-form-item
              label="选择客户"
              prop="cstmr_name"
              :rules="[{ required: true, message: '客户不能为空' }]"
            >
              <el-select
                v-model="order.cstmr_name"
                filterable
                remote
                reserve-keyword
                placeholder="请输入客户名"
                :remote-method="getCustomer"
                :loading="loading1"
                @change="changeCustomer"
                value-key="id"
              >
                <el-option
                  v-for="item in customers"
                  :key="item.id"
                  :label="item.username"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <!-- <div class="OrderSelectionCustomer dialogflex">
          <div class="dialogtypeface" style="margin: 0px 20px 0 0">
            选择业务员
          </div>
          <el-select v-model="salesmanvalue" filterable placeholder="请选择">
            <el-option
              v-for="item in salesman"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="placeOrder">确认下单</el-button>
        <el-button  @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- <el-dialog
      class="dialogTitle"
      title="确认下单数量"
      :visible.sync="dialogVisible"
      width="627px"
    >
      <el-table :data="shopCart" :show-header="false">
        <el-table-column width="120" align="center">
          <template slot-scope="{ row }">
            <el-image
              style="width: 98px; height: 60px"
              :src="baseurl + '/' + row.img"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" width="200" align="left">
        </el-table-column>
        <el-table-column width="150" align="center" show-header="false">
          <template slot-scope="{ row }">
            <el-input-number
              :min="1"
              size="mini"
              v-model="row.num"
              @change="handleNum(row.id, row.num)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column align="center" show-header="false">
          <template slot-scope="{ row }">
            <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              title="确认删除当前花型？"
              @confirm="Orderblockdelete(row.id)"
            >
              <el-button type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-form>
        <div class="dialogflex">
          <el-form-item
            label="要求交期"
            prop="delivery_date"
            :rules="[{ required: true, message: '要求交期不能为空' }]"
          >
            <el-date-picker
              v-model="order.delivery_date"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </div>

        <div
          class="OrderSelectionCustomer dialogflex"
          v-if="session.role_id != 2"
        >
          <el-form-item
            label="选择客户"
            prop="customervalue"
            :rules="[{ required: true, message: '要求交期不能为空' }]"
          >
            <el-select v-model="customervalue" filterable placeholder="请选择">
              <el-option
                v-for="item in customer"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="placeOrder">确认下单</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { searchCustomer } from "@/app/api/system";
import { orderAdd } from "@/app/api/order";
import { patternInfo, patternPublic } from "@/app/api/pattern";
import { cartAdd, cartList, cartDelete, cartNum } from "@/app/api/shopcat";
import data from "@/app/utils/areas.json";

import { Message } from "element-ui";
import { mapState } from "vuex";

export default {
  components: {},
  name: "FlowerInfo",
  data() {
    return {
      curCust: {},
      order: {
        delivery_date: "",
      },
      customers: [],
      loading1: false,
      order: {
        delivery_date: "",
      },
      uid: 0,
      pid: 0,
      isCart: 0,
      form: {
        picture: "",
        is_valid: "",
        no: "",
        unit: "",
        factory: "",
        stock: "",
        height: "",
        weight: "",
        updated: "",
        FlowersStock:[],
      },
      baseurl: api_url,
      num: 1,
      areas: [],

      dialogVisible: false,
      Orderblocknum: "",
      DeliveryDate: "",
      shopCart: [],
      shopNum: "",
    };
  },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    this.uid = this.session.id;
    this.areas = data;
    this.pid = this.$route.params.pid;
    this.isCart = this.$route.params.isCart;
    this.similarity_value = this.$route.params.similarity_value;
    this.getInfo();
    this.getCartList();
  },
  methods: {
    placeOrder() {
      this.$refs["order"].validate((valid) => {
        if (valid) {
          this.order.goods = [];
          this.order.goods.push({ pid: this.form.pid, num: this.num });
          console.log(this.order);
          orderAdd(this.order)
            .then((res) => {
              Message({
                message: "下单成功!",
                type: "success",
                duration: 2 * 1000,
              });
              this.dialogVisible = false;
              // this.getCartList();
            })
            .catch((error) => {
              console.log("cartList error", error);
            });
          return;
        } else {
          return false;
        }
      });
    },
    changeCustomer(customer) {
      this.order.cstmr_num = customer.usercode;
      this.order.cstmr_name = customer.username;
    },
    getCustomer(query) {
      if (query !== "") {
        this.loading1 = true;
        searchCustomer({ role: 3, username: query })
          .then((res) => {
            this.customers = res.data;
            this.loading1 = false;
          })
          .catch((error) => {
            console.log("getCustomer error", error);
            this.loading1 = false;
          });
      }
    },
    getInfo() {
      patternInfo({ pid: this.pid,similarity_value:this.similarity_value})
        .then((res) => {
          this.form = res.data;
          console.log(this.form);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    publicA() {
      this.$confirm("请确认操作!", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          patternPublic({ pid: this.pid })
            .then((res) => {
              Message({
                message: "发布成功",
                type: "success",
                duration: 2 * 1000,
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消!",
          });
        });
    },
    // 购物车添加
    addCart(pid, no, series, picture) {
      this.$confirm("确认加入购物车?", "确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let title = `${no}(${series})`;
          let info = { id: pid, title, img: picture };
          info = JSON.stringify(info);
          cartAdd({ uid: this.uid, pid, num: this.num, info })
            .then((res) => {
              Message({
                message: "添加成功",
                type: "success",
                duration: 2 * 1000,
              });
              // this.getCartList();
            })
            .catch((error) => {
              console.log("cartList error", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //购物车列表
    getCartList() {
      cartList({ uid: this.uid })
        .then((res) => {
          res.data.forEach(v => {
              if(this.pid == v.id){
                this.num = v.num
                return;
              }
          });
        })
        .catch((error) => {
          console.log("cartList error", error);
        });
    },
    // 购物车删除
    // Orderblockdelete(pid) {
    //   cartDelete({ uid: this.uid, pid })
    //     .then((res) => {
    //       Message({
    //         message: "删除成功",
    //         type: "success",
    //         duration: 2 * 1000,
    //       });
    //       this.getCartList();
    //     })
    //     .catch((error) => {
    //       console.log("cartList error", error);
    //     });
    // },
    // 购物车商品数量
    // handleNum(pid, num) {
    //   cartNum({ uid: this.uid, pid, num })
    //     .then((res) => {})
    //     .catch((error) => {
    //       console.log("cartList error", error);
    //     });
    // },
  },
  filters: {
    formatterTime(time) {
      if (time) {
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(time)[0];
      }
      // return /\d{4}-\d{1,2}-\d{1,2}/g.exec(time)[0];
    },
  },
};
</script>

<style>
/* .red {
  color: red;
} */
.main-content {
  width: 97%;
  /* height: 840px; */
  height: auto;
  margin: 1% auto;
  border-radius: 10px;
  box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.25);
  background-color: #fbfbfb;
  padding: 0px;
  position: relative;
  padding-bottom: 150px;
}
.toptitleblock {
  width: 100%;
  height: 77px;
  border-radius: 10px 10px 0px 0px;
  /* background: #fbfbfb; */
  /* background-color: #fbfbfb; */
  position: relative;
  /* margin-bottom: 36px; */
}
.Maintitle {
  font-size: 25px;
  position: absolute;
  bottom: 10%;
  left: 1%;
}
.titlebutton2 {
  position: absolute;
  top: 26px;
  right: 67px;
}
.titlebutton1 {
  position: absolute;
  top: 26px;
  right: 206px;
}

.PatternData {
  width: 100%;
  height: 228px;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}
.state {
  /* width: 64px; */
  /* height:27px; */
  position: absolute;
  top: 44px;
  left: 300px;
}
.Secondarytitle {
  position: absolute;
  top: 40px;
  left: 396px;
  width: 400px;
}
.tInfo span:nth-of-type(1) {
  position: absolute;
  top: 95px;
  left: 298px;
}
.tInfo span:nth-of-type(2) {
  position: absolute;
  top: 95px;
  left: 638px;
}
.tInfo span:nth-of-type(3) {
  position: absolute;
  top: 144px;
  left: 298px;
}
.tInfo span:nth-of-type(4) {
  position: absolute;
  top: 144px;
  left: 638px;
}
.tInfo span:nth-of-type(5) {
  position: absolute;
  top: 95px;
  left: 953px;
}
.el-descriptions__table {
  background-color: #fbfbfb;
}

.el-descriptions__title {
  font-size: 16px;
  font-weight: 700;
  border-left: 4px solid #1890ff;
  width: 120px;
  padding-left: 5px;
}
.tInfo {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
}
.tInfo span {
  margin-top: 25px;
  width: 50%;
}
[v-cloak] {
  display: none;
}

.dialogTitle .el-dialog {
  background: #f3f3f3;
  border-radius: 20px;
  margin-top: 18vh !important;
}
.dialogTitle .el-dialog__title {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  color: #000000;
}
.Orderblock {
  width: 583px;
  height: 77px;
  margin-bottom: 6px;
  background: #ffffff;
  border-radius: 5px;
  position: relative;
}
.OrderblockTitle {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  position: absolute;
  top: 11px;
  left: 80px;
}
.Orderblock .el-input-number {
  position: absolute;
  top: 42px;
  left: 348px;
}
.Orderblockdelete {
  font-family: Alibaba PuHuiTi;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 22px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 57px;
  height: 64px;
  background-color: #fb4f4f;
  position: absolute;
  left: 500px;
  top: 7px;
  user-select: none;
}
.OrderSelectionCustomer .el-input__inner {
  width: 170px;
  height: 35px;
  background: #ffffff;
  border-radius: 10px;
}
.OrderSelectionCustomer .el-input__icon {
  line-height: 30px;
}
.dialogtypeface {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
  margin: 0px 36px 0 0;
}
.dialogflex {
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
}
</style>
